<template>
    <view class="content">
        <Form ref="formRef" v-model:data="formData" :items="formItems" :rules="formRules">
            <template #slotInner1>
                <view style="color: green;">自定义内容1</view>
            </template>
            <template #slotInner2>
                <view style="color: blue;">自定义内容2</view>
            </template>
        </Form>
        <up-button type="primary" text="确定" @click="formSubmit()"></up-button>
        <up-button type="info" text="重置" @click="formReset()"></up-button>
    </view>
</template>

<script setup>
import Form from '@/components/form/index.vue'
const formRef = ref()
const formItems = reactive([
    { label: '姓名', key: 'name', type: 'text', placeholder: '请输入姓名' },
    { label: '数字', key: 'num', type: 'number', placeholder: '请输入数字' },
    { label: '带小数点数字', key: 'digitnmu', type: 'digit', placeholder: '请输入小数点数字', disabled: true },
    { label: '密码', key: 'password', type: 'password', placeholder: '请输入密码' },
    { label: '身份证', key: 'idcard', type: 'idcard', placeholder: '请输入身份证' },
    { label: '备注', key: 'remark', type: 'textarea', placeholder: '请输入备注' },
    {
        label: '列表选择', key: 'selected', type: 'select', placeholder: '请选择人员', items: [
            { label: '小明', key: 'xiaoming' },
            { label: '小王', key: 'xiaowang' },
        ]
    },
    { label: '是否', key: 'switch', type: 'switch' },
    {
        label: '单选', key: 'radio', type: 'radio', placeholder: '请选择性别', items: [
            { label: '男', key: 'men' },
            { label: '女', key: 'women' },
        ]
    },
    {
        label: '多选', key: 'checkbox', type: 'checkbox', placeholder: '请选择水果', items: [
            { label: '苹果', key: 'apple' },
            { label: '香蕉', key: 'banana' },
            { label: '橘子', key: 'orange' },
        ]
    },
    { label: '滑动取值', key: 'slider', type: 'slider', step: 1, min: 5, max: 20 }, // uView组件库有问题不推荐使用
    { label: '评分', key: 'rate', type: 'rate' },
    { label: '定位', key: 'address', type: 'address', placeholder: '请选择定位' },
    { label: '日期单选', key: 'date', type: 'date', placeholder: '请选择日期' },
    { label: '日期多选', key: 'dates', type: 'dates', placeholder: '请选择日期' },
    { label: '日期范围', key: 'daterange', type: 'daterange', placeholder: '请选择日期' },
    { label: '日期时间', key: 'datetime', type: 'datetime', placeholder: '请选择时间' },
    { label: '时间', key: 'time', type: 'time', placeholder: '请选择时间' },
    { label: '验证码', key: 'code', type: 'code', url: '/api/code', timer: 30 },
    { label: '自定义1', key: 'slot', type: 'slot', slotName: 'slotInner1' },
    { label: '自定义2', key: 'slot', type: 'slot', slotName: 'slotInner2' },
])
const formData = ref({
    name: '默认值A',
    num: undefined,
    digitnmu: undefined,
    password: undefined,
    idcard: undefined,
    remark: undefined,
    selected: undefined,
    switch: undefined,
    radio: undefined,
    checkbox: undefined,
    slider: 10,
    rate: undefined,
    address: undefined,
    date: undefined,
    dates: undefined,
    daterange: undefined,
    datetime: undefined,
    time: undefined,
})
const formRules = ref({
    name: {
        required: true,
        message: '请填写姓名',
        trigger: ['blur', 'change']
    },
    num: {
        required: true,
        message: '请填写数字',
        trigger: ['blur', 'change']
    },
})
const formReset = () => {
    const $form = formRef.value.$form
    // 表单内容重置
    $form.resetFields()
}
const formSubmit = () => {
    const $form = formRef.value.$form
    // 表单验证
    $form.validate().then(res => {
        // console.log(res);
        $toast.success('校验通过')
        const data = toRaw(formData.value)
        console.log(data);
    }).catch(err => {
        // console.log(err);
        $toast.error('校验未通过')
    })
}
onMounted(() => {
    const $form = formRef.value.$form
    // 验证状态清除
    $form.clearValidate()
})
</script>

<style scoped>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>
